<template>
  <el-col class="app-v-center app-column app-flex-1" style="overflow-y: auto">
    <el-row
      class="app-h-56px app-fill-width app-h-end app-v-center px-4 app-bb-1px-l2"
      :gutter="10"
    >
      <!-- <el-col :span="2" :xs="6" class="mr-2">
        <el-select v-model="type" @change="getDataList">
          <el-option
            key="v0"
            label="全部"
            :value="undefined"
          />
          <el-option
            key="v1"
            label="已使用"
            :value="1"
          />
          <el-option
            key="v2"
            label="未使用"
            :value="0"
          />
        </el-select>
      </el-col> -->
      <el-button
        type="primary"
        @click="editInfo()"
      >修改个人介绍<i
        class="el-icon-edit"
      /></el-button>
      <el-button type="primary" @click="addMusic()">添加音乐</el-button>
    </el-row>
    <el-table
      :data="dataList"
      class="app-flex-1"
      style="width: 100%; overflow-y: auto"
    >
      <el-table-column prop="name" align="center" label="歌名" />
      <el-table-column prop="language" align="center" label="语言" />
      <el-table-column prop="author" align="center" label="歌手" />
      <el-table-column prop="remark" align="center" label="备注" />
      <el-table-column prop="action" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="error"
            @click="editMusic(scope.row)"
          >修改</el-button>
          <el-button
            size="small"
            type="warning"
            @click="deleteMusic(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mb-10 mt-5"
      style="max-width: 100vw"
      background
      :current-page.sync="pageNo"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getDataList"
      @current-change="getDataList"
    />

    <el-dialog
      title="修改介绍信息"
      :visible.sync="showInfoDialog"
      width="800px"
    >
      <div>
        <el-form
          ref="form"
          :model="info"
          :rules="rules"
          label-width="120px"
          class="app-flex-1"
        >
          <el-form-item label="名字" prop="name">
            <el-input v-model="info.name" />
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-upload
              :multiple="false"
              :show-file-list="false"
              :action="`${host}/upload`"
              :on-success="handleAvatarSuccess"
            >
              <div class="avatar-uploader uploader">
                <img v-if="info.avatar" :src="info.avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="背景" prop="bgImage">
            <el-upload
              :multiple="false"
              :show-file-list="false"
              :action="`${host}/upload`"
              :on-success="handleBgSuccess"
            >
              <div class="bg-uploader uploader">
                <img v-if="info.bgImage" :src="info.bgImage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="个人介绍" prop="directSeeding">
            <el-input v-model="info.introduction" />
          </el-form-item>
          <el-form-item label="直播间地址" prop="directSeeding">
            <el-input v-model="info.directSeeding" />
          </el-form-item>
          <el-form-item label="个人空间地址" prop="directSeeding">
            <el-input v-model="info.space" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer app-h-end">
          <el-button @click="showInfoDialog = false">取 消</el-button>
          <el-button type="primary" @click="updateSetting">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="isEdit ? '编辑音乐' : '添加音乐'"
      :visible.sync="showMusicDialog"
      width="800px"
    >
      <el-form
        ref="musicForm"
        :model="musicInfo"
        :rules="rules"
        label-width="120px"
        class="app-flex-1"
      >
        <el-form-item label="歌名" prop="name">
          <el-input v-model="musicInfo.name" />
        </el-form-item>
        <el-form-item label="歌手" prop="author">
          <el-input v-model="musicInfo.author" />
        </el-form-item>
        <el-form-item label="语言" prop="language">
          <el-input v-model="musicInfo.language" />
        </el-form-item>
        <el-form-item label="标记" prop="remark">
          <el-input v-model="musicInfo.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer app-h-end">
        <el-button @click="showMusicDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitMusicInfo">确认</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>

<script>
import { getDataList, getConfig,addMusic, deleteMusic,updateSetting } from '@/api/user'
import { host } from '@/utils/request'
export default {
  data: () => ({
    host,
    rules: {
      name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
      userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
    },
    isEdit: false,
    showInfoDialog: false,
    showMusicDialog: false,
    info: {
      avatar: '',
      bgImage: '',
      directSeeding: '',
      introduction: '',
      space: ''
    },
    musicInfo: {
      author: '',
      language: '',
      name: '',
      remark: ''
    },
    dataList: [],
    type: undefined,
    pageNo: 1,
    pageSize: 10,
    total: 0
  }),
  mounted() {
    this.getDataList()
    this.getDataConfig()
  },
  methods: {
    getDataConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.info = res.data
        }
      })
    },
    editInfo() {
      this.showInfoDialog = true
    },
    handleAvatarSuccess(a, b, c, d) {
      this.info.avatar = host + a
    },
    handleBgSuccess(a, b, c, d) {
      this.info.bgImage = host + a
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    updateSetting() {
      updateSetting(this.info).then((res) => {
        if (res.code === 200) {
          this.getDataConfig()
          this.showInfoDialog = false
          this.$message.success('修改成功')
        }
      })
    },
    addMusic() {
      this.isEdit = false
      this.musicInfo = {
        author: '',
        language: '',
        name: '',
        remark: ''
      }
      this.showMusicDialog = true
      this.$nextTick(() => {
        this.$refs.musicForm.clearValidate()
      })
    },
    editMusic(item) {
      this.isEdit = true
      this.musicInfo = item
      this.showMusicDialog = true
      this.$nextTick(() => {
        this.$refs.musicForm.clearValidate()
      })
    },
    deleteMusic(item) {
      this.$confirm(`确认删除音乐： ${item.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMusic(item).then((res) => {
          if (res.code === 200) {
            this.getDataList()
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {
      })
    },
    submitMusicInfo() {
      addMusic(this.musicInfo).then((res) => {
        if (res.code === 200) {
          if (this.musicInfo.id) {
            this.$message.success('修改成功')
          } else {
            this.$message.success('添加成功')
          }
          this.showMusicDialog = false
          this.pageNo = 1
          this.getDataList()
        }
      })
    },
    getDataList() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.searchText
      }
      getDataList(params).then((res) => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
  width: 80px;
  height: 80px;
}
.bg-uploader {
  width: 160px;
  height: 160px;
}

.uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploader img {
  width: 100%;
  height: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
